<template>
	<view class="container">
		<view class="header">
			<!-- 自取 -->
			<view class="left" v-if="!this.addInfo">
				<view class="store-name">
					<text>卓悦中心ONE AVENUE店</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="store-location">
					<u-icon name="map" size="12" color="#ADB838" ></u-icon>
					<text>距离您1000米</text>
				</view>
			</view>
			<!-- 外卖 -->
			<view class="left_copy" v-else>
				<view class="store-name">
					<u-icon name="map" size="18" color="#ADB838" ></u-icon>
					<text>{{this.addInfo.desc}}</text>
				</view>
				<view class="store-location">
					<text>由卓悦中心ONE AVENUE店配送</text>
				</view>
			</view>
			<view class="right">
				<u-button :class="this.addInfo?'':'active'" @tap="optIn">
					<text>自取</text>
				</u-button>
				<u-button :class="this.addInfo?'active':''" @tap="chooseTakeaway">
					<text>外卖</text>
				</u-button>
			</view>
		</view>
		<view class="coupon">
			<text class="title">"霸气mini卡"超级购券活动，赶紧去购买</text>
			<u-icon name="arrow-right" color="#ADB838"></u-icon>
		</view>
		<!-- 分类 -->
		<view class="content">
			<!-- 左侧导航 -->
			<view class="nav">
				<scroll-view scroll-y style="min-height: 85vh;">
					<text class="nav-text" v-for="(nav,index) in goodsList" :key="nav.id" :class="index===currentIndex?'active':''"
					@tap="current(index)">
						{{nav.name}}
					</text>
				</scroll-view>
			</view>
			<!-- 右侧商品 -->
			<view class="goodsBox">
				<scroll-view scroll-y style="max-height: 80vh;" :scroll-into-view="dataId" @scroll="sRightBtn" @scrolltolower="scrollBottonBtn">
					<!-- 轮播图 -->
					<view class="swiper">
						<u-swiper
								:list="swiperList"
								indicator
								indicatorMode="line"
								circular
						></u-swiper>
					</view>
					<!-- 每类商品 -->
					<view class="grid" v-for="(good,index) in goodsList" :key="good.id" :id="'id'+index">
						<view class="title">
							<text class="text-title">{{good.name}}</text>
						</view>
						<view v-for="shop in shopInfoList" :key="shop.id">
							<template v-if="shop.s_classify.name===good.name">
								<view class="good">
									<image :src="shop.s_goods_photos[0].path" @tap="goProduct(shop)" ></image>
									<view class="good-right">
										<text class="name">{{shop.name}}</text>
										<text class="tips">{{shop.desc}}</text>
										<view class="price_and_icon">
											<text class="price">￥{{shop.price}}</text>
											<view class="icon">
												<template v-if="shop.sku">
													<u-button type="primary" shape="circle" text="选规格" size="mini" @tap="goProduct(shop)"></u-button>
												</template>
												<!-- 步进器 -->
												<template v-else>
													<u-number-box v-model="shop.num" :min="0"  @change="subNum(shop)">
														<view 
															v-show="shop.num!==0"
															slot="minus"
															class="minus"
														>
															<u-icon name="minus-circle" size="22" ></u-icon>
														</view>
														<text
															v-show="shop.num!==0"
															slot="input"
															style="width: 50px;text-align: center;"
															class="input"
														>{{shop.num}}</text> 
														<view
															slot="plus"
															class="plus"
														>
															<u-icon name="plus-circle" color="#adb838" size="22" @tap="addCart(shop)"></u-icon>
														</view>
													</u-number-box>
												</template>
											</view>
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品详情 -->
		<u-popup :show="showCart" mode="center" round="10" closeable closeOnClickOverlay @close="closeInfo" zIndex="30000">
			<view class="product-info">
				<image class="shop-img" :src="this.shopInfo.photo" mode=""></image>
				<view class="shop-text">
					<text class="shop-title">{{this.shopInfo.name}}</text>
					<text class="shop-desc">{{this.shopInfo.desc}}</text>
				</view>
				<!-- sku -->
				<view class="shop-sku" v-if="shopInfo.sku">
					<view class="properties" v-for="shop in shopInfo.sku.property">
						<text class="product-titlt">{{shop.keyName}}</text>
						<view class="product-btn">
							<view v-for="(btn,index) in shop.s_attributesValues" :key="btn.id">
								<view class="sku-btn" @tap="showActive(btn.id)" :class="btn.id===activeIndex?'active':''">
									{{btn.attribute_value}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-cart">
					<view class="action">
						<text class="shop-price">￥11</text>
						<view class="shop-icon">
							<!-- 步进器 -->
							<u-number-box v-model="shopInfo.num" :min="0" @change="subNum(shopInfo)">
								<view 
									slot="minus"
									class="minus"
								>
									<u-icon name="minus-circle" size="22" ></u-icon>
								</view>
								<text
									slot="input"
									style="width: 50px;text-align: center;"
									class="input"
								>{{shopInfo.num}}</text> 
								<view
									slot="plus"
									class="plus"
								>
									<u-icon name="plus-circle" color="#adb838" size="22" @tap="addCart(shopInfo)"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					<u-button color="#ADB838" text="加入购物车" @tap="addCartHandler(shopInfo)"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 购物车栏 begin -->
		<view class="cart-box" v-if="shopCartList.length">
			<view class="mark">
				<image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
				<view class="tag">{{shopCartList.length}}</view>
			</view>
			<view class="price">￥ {{totalPrice}}</view>
			<button type="primary" class="pay-btn" @tap="toPay">
				去结算
			</button>
		</view>
		<!-- 购物车栏 end -->
		<!-- 购物车商品 -->
		<view v-if="shopCartList.length">
			<u-popup :show="showCartList" mode="bottom" @close="showCartList=false">
				<view class="cart-popup">
					<view class="top" @tap="clearList">
						清空
					</view>
					<scroll-view class="cart-list">
						<view class="wrapper">
							<view class="item" v-for="cart in shopCartList" :key="cart.id">
								<view class="left">
									<text class="text">{{cart.name}}</text>
								</view>
								<view class="center">
									<text class="price">￥{{cart.price}}</text>
								</view>
								<view class="right">
									<!-- 步进器 -->
									<u-number-box v-model="cart.num" :min="0" @change="subNum(cart)">
										<view 
											slot="minus"
											class="minus"
										>
											<u-icon name="minus-circle" size="22" ></u-icon>
										</view>
										<text
											slot="input"
											style="width: 50px;text-align: center;"
											class="input"
										>{{cart.num}}</text> 
										<view
											slot="plus"
											class="plus"
										>
											<u-icon name="plus-circle" color="#adb838" size="22" @tap="addCart(cart)"></u-icon>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				addInfo:'',
				// 选中商品索引
				currentIndex:0,
				swiperList:[],
				goodNum:1,
				showCart:false,
				shopInfoList:[],
				shopInfo:{},
				activeIndex:0,
				showCartList:false,
				shopCartList:[],
				dataId:'',
				goodsList:[],
				carouseList:[],
				shopList:[],
				nodeInfo:''
			}
		},
		computed:{
			// ...mapState('goods',['goodsList','carouseList','shopList']),
			...mapState('cart',['cartList']),
			totalPrice(){
				return this.shopCartList.reduce((prev,item)=>{
					return prev+item.num*item.price
				},0)
			}
		},
		onLoad(options) {
			// 地址信息
			if(options.add){
				// console.log(options);
				this.addInfo=JSON.parse(options.add)
				Object.assign(this.addInfo,JSON.parse(options.add))
				uni.setStorageSync('addInfo',JSON.parse(options.add))
			}
			// 获取分类信息
			this.getGoodsList({project_id:2})
			this.goodsList=uni.getStorageSync('goodsList')
			// 获取轮播图
			this.getCarouselAll({project_id:2})
			this.carouseList=uni.getStorageSync('carouseList')
			this.carouseList.forEach(ele=>{
				this.swiperList.push(ele.s_photos[0].path)
			})
			// 获取所有商品
			this.getShopList({project_id:2,limit:999})
			this.shopList=uni.getStorageSync('shopList')
			// 获取sku并给商品添加
			this.shopList.forEach(ele=>{
				this.getSku({id:ele.id}).catch(err=>{
					if(err.property.length!==0){
						this.$set(ele,'sku',err)
					}
				})
				this.$set(ele,'num',0)
				this.shopInfoList.push(ele)
			})
		},
		methods: {
			//获取节点信息
			getNodeDetails(e) {
				const query = uni.createSelectorQuery().in(this); //获得实力
				//获取多个节点方式
				query.selectAll(".grid").boundingClientRect(data => {
					// console.log(data); //得到class类名为  selectAll的数组集合
					this.nodeInfo = data.map(item => {
						return Math.ceil(item.top);
					})
					// console.log(this.nodeInfo);
					this.computedNavIndex(e)
				}).exec();
			},
			//右边滚动触发
			sRightBtn(e) {
				this.getNodeDetails(e)
			},
			// 计算高度赋值左边
			computedNavIndex(height) { //data 滚动高度
				// console.log(height);
				if (height) {
					let res = height.detail.scrollTop + this.nodeInfo[0];
					for (let i = 0; i < this.nodeInfo.length; i++) {
						let node1 = this.nodeInfo[i];
						let node2 = this.nodeInfo[i + 1];

						if (node2 && res >= node1 && res < node2) {
							this.currentIndex = i;
							break;
						} else if (node2 && res === node2) {
							this.currentIndex = i + 1;
							break;
						}
					}
				}
			},
			// 右边滚动到底部触发
            scrollBottonBtn() {
                // console.log('1', this.activeNav);
                setTimeout(() => {
                    this.currentIndex = this.goodsList.length-1;
                }, 100)

            },

			// 选择外卖
			chooseTakeaway(){
				uni.navigateTo({
					url:'/subpackage/address/address'
				})
			},
			// 自取
			optIn(){
				this.addInfo=''
			},
			...mapActions('goods',['getGoodsList','getCarouselAll','getShopList','getSku']),
			...mapActions('cart',['addCart','getCart','updateCart','delCart']),
			// 选中的左侧商品
			current(index){
				this.currentIndex=index
				this.dataId='id'+index
			},
			// 去商品详情
			goProduct(shop){
				// console.log(shop);
				this.showCart=true
				Object.assign(this.shopInfo,shop)
				// this.shopInfo=shop
				this.shopInfo.photo=shop.s_goods_photos[0].path
				this.shopInfo.num=1
			},
			// 关闭商品详情
			closeInfo(){
				this.showCart=false
				this.shopInfo.num=0
			},
			showActive(index){
				// console.log(index);
				this.activeIndex=index
			},
			// 加入购物车
			addCart(cart){
				let res=this.shopCartList.filter(ele=>{
					return ele.id===cart.id
				})
				if(res.length){
					res.num++
				}else{
					this.shopCartList.push(cart)
				}
			},
			// 减少数量 清除购物车
			subNum(cart){
				this.$nextTick(()=>{
					this.shopCartList=this.shopCartList.filter(ele=>{
						return ele.num!==0
					})
					// console.log(this.shopCartList);
				})
			},
			shopNumSub(shop){
				if(shop.num===0){
					this.shopCartList=[]
				}
			},
			// 清空
			clearList(){
				// console.log(this.shopCartList);
				this.shopCartList.forEach((ele)=>{
					this.$set(ele,'num',0)
				})
				this.shopCartList=[]
			},
			// 查看商品列表
			openCartPopup(){
				this.showCartList=!this.showCartList
			},
			// 去支付
			toPay(){
				uni.setStorageSync('shopCartList',this.shopCartList)
				if(this.addInfo){
					uni.navigateTo({
						url:'/subpackage/pay/pay?takeout=takeout'
					})
				}else{
					uni.navigateTo({
						url:'/subpackage/pay/pay?ask=卓悦中心ONE AVENUE店'
					})
				}
			}
			// // 加入购物车
			// addCartHandler(shopInfo){
			// 	this.addCart({goods_id:shopInfo.id,num:shopInfo.num})
			// },
			// // 点击直接加入购物车
			// addCartFun(shop){
			// 	console.log(shop);
			// 	this.$nextTick(()=>{
			// 		if(shop.num>0){
			// 			// 加入购物车
			// 			this.addCart({goods_id:shop.id,num:shop.num})
			// 		}
			// 	})

			// },
			// // 更新数量
			// valChange(cart){
			// 	this.$nextTick(()=>{
			// 		this.updateCart(cart)
			// 		if(cart.num<=0){
			// 			this.delCart(cart.id)
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
.container{
	position: fixed;
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		width: 100%;
		height: 140rpx;
		box-sizing: border-box;
		.left{
			display: flex;
			flex-wrap: wrap;
			width: 480rpx;
			height: 84rpx;
			.store-name{
				display: flex;
				font-size: 32rpx;
				font-weight: 700;
			}
			.store-location{
				display: flex;
				color: #919293;
				font-size: 24rpx;
			}
		}
		.left_copy{
			.store-name{
				display: flex;
				font-size: 32rpx;
				font-weight: 700;
			}
			.store-location{
				font-size: 24rpx;
				color: #919293;
			}
		}
		.right{
			display: flex;
			width: 230rpx;
			height: 60rpx;
			.active{
				background-color: #ADB838;
			}
			.u-button{
				width: 160rpx;
				height: 60rpx;
				border-radius: 30rpx 0 0 30rpx;
				color: #919293;
			}
			.u-button:last-child{
				border-radius: 0 30rpx 30rpx 0;
			}
		}
	}
	.coupon{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 72rpx;
		background-color: #E8EACF;
		box-sizing: border-box;
		.title{
			font-size: 14px;
			color: #ADB838;
		}
	}
	.content{
		position: fixed;
		display: flex;
		.nav{
			width: 200rpx;
			height: 100%;
			background-color: #f5f5f5;
			.active{
				background-color: #fff;
			}
			.nav-text{
				display: block;
				width: 200rpx;
				height: 100%;
				color: #5A5B5C;
				text-align: center;
				line-height: 92rpx;
				font-size: 26rpx;
			}
		}
		.goodsBox{
			padding: 20rpx;
			padding-bottom: 20rpx;
			width: 550rpx;
			height: 80vh;
			box-sizing: border-box;
			.grid:last-child{
				// background-color: red;
				margin-bottom: 180rpx;
			}
			.grid{
				margin: 30rpx auto;
				.title{
					margin-bottom: 20rpx;
					.text-title{
						flex: 28rpx;
						color: #5A5B5C;
					}
				}
				.good{
					margin-bottom: 30rpx;
					display: flex;
					width: 510rpx;
					height: 160rpx;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
					.good-right{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						width: 330rpx;
						height: 160rpx;
						.name{
							font-size: 28rpx;
						}
						.tips{
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 24rpx;
							color: #919293;
						}
						.price_and_icon{
							display: flex;
							justify-content: space-between;
							.price{
								font-size: 28rpx;
								font-weight: 600;
							}
							.icon{
								display: flex;
							}
						}
					}
				}
			}
		}
	}
	// 商品详情
	.product-info{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 690rpx;
		min-height: 600rpx;
		border-radius: 20rpx;
		.shop-img{
			margin: 20rpx auto 0;
			width: 260rpx;
			height: 260rpx;
		}
		.shop-text{
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			.shop-title{
				font-size: 28rpx;
				color: #5A5B5C;
			}
			.shop-desc{
				font-size: 24rpx;
				color: #878889;
			}
		}
		.shop-sku{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			margin: 0 auto;
			width: 674rpx;
			// height: 342rpx;
			min-height: 171rpx;
			.properties{
				width: 614rpx;
				height: 136rpx;
				.product-titlt{
					font-size: 26rpx;
					color: #5A5B5C;
					margin-right: 10px;
				}
				.product-btn{
					margin-top: 15rpx;
					display: flex;
					width: 614rpx;
					// height: 82rpx;
					.sku-btn{
						// width: 120rpx;
						// height: 70rpx;
						margin-right: 15rpx;
						padding: 16rpx 30rpx;
						font-size: 26rpx;
						border-radius: 10rpx;
						background-color: #f5f5f5;
						color: #919293;
					}
					.active{
						background-color: #ADB838;
						color: #ffffff;
					}
				}
			}
		}
		.shop-cart{
			.action{
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				background-color: #f5f5f5;
				box-sizing: border-box;
				.shop-price{
					font-size: 32rpx;
					color: #5A5B5C;
				}
				.shop-icon{
					display: flex;
				}
			}
		}
	}
	// 购物车
	.cart-box {
		position: fixed;
		bottom: 130rpx;
		left: 30rpx;
		right: 30rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 19999;
		
		.cart-img {
			width: 96rpx;
			height: 96rpx;
			position: relative;
			margin-top: -48rpx;
		}
		
		.pay-btn {
			height: 100%;
			padding: 0 30rpx;
			color: #FFFFFF;
			border-radius: 0 50rpx 50rpx 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			background-color: #ADB838;
		}
		
		.mark {
			padding-left: 46rpx;
			margin-right: 30rpx;
			position: relative;
			
			.tag {
				background-color: #FAB714;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				position: absolute;
				right: -10rpx;
				top: -50rpx;
				border-radius: 100%;
				padding: 4rpx;
				width: 40rpx;
				height: 40rpx;
				opacity: .9;
			}
		}
		
		.price {
			flex: 1;
			color: #000;
		}
	}
	.cart-popup{
		position: fixed;
		bottom: 128rpx;
		// height: 400rpx;
		width: 750rpx;
		background-color: #fff;
		padding-bottom: 100rpx;
		.top{
			background-color: #E8EACF;
			color: #ADB838;
			padding: 5px 15px;
			font-size: 12px;
			text-align: right;
		}
		.cart-list{
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			min-height: 1vh;
			// max-height: 60vh;
			.wrapper{
				.item{
					padding-left: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 750rpx;
					height: 106rpx;
					box-sizing: border-box;
					.left{
						.text{
							font-size: 24rpx;
							color: #5A5B5C;
						}
					}
					.center{
						.price{
							font-size: 28rpx;
						}
					}
				}
			}
		}
		
	}
}
</style>
